<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div class="fireDeviceManger">
    <div class="abstatic-height"></div>
    <div class="app-container">
        <div class="fireDeviceManger_main">
          <div class="fireDeviceManger_main_left">
              <el-row>
                <div style="padding-right: 10px;">
                  <div class="xf-tabletop-handles">
                    <div class="fireDeviceManger-title">设备管理</div>
                    <div class="xf-tabhd-left"></div>
                    <div class="xf-tabhd-right">
                      <span style="color:rgba(255, 255, 255, 0.7);">设备编号</span>
                      <el-input
                        v-model="listQuery.sensorNo"
                        placeholder="请输入设备编号"
                        class="xf-query-input"
                        size="mini"
                      ></el-input>
                      <el-button @click="tableQuery" type="primary" size="mini">查询</el-button>
                      <el-popover
                        placement="bottom-end"
                        width="700"
                        class="xf-custom-poper"
                        @show="getSelected"
                        v-model="visible2"
                      >
                        <div class="xf-double-form">
                          <div class="xf-dbform-item">
                            <div class="xf-dbform-item__sleft">
                              <p class="xf-dbform-item__label">状态</p>
                              <el-select placeholder="请选择状态" v-model="slistQuery.status">
                                <el-option label="全部" value="-1"></el-option>
                                <el-option label="正常" value="2"></el-option>
                                <el-option label="故障" value="0"></el-option>
                                <el-option label="报警" value="1"></el-option>
                                <el-option label="离线" value="4"></el-option>
                                <el-option label="未启用" value="3"></el-option>
                              </el-select>
                            </div>
                            <div class="xf-dbform-item__sright">
                              <p class="xf-dbform-item__label">厂商</p>
                              <el-select placeholder="请选择厂商" v-model="slistQuery.manufacturer">
                                <el-option
                                  :label="item"
                                  :value="item"
                                  v-for="item in manufeList"
                                  :key="item"
                                ></el-option>
                              </el-select>
                            </div>
                          </div>
                          <div class="xf-dbform-item">
                            <div class="xf-dbform-item__sleft">
                              <p class="xf-dbform-item__label">系列</p>
                              <el-select placeholder="请选择系列" v-model="slistQuery.equipmentType">
                                <el-option
                                  :label="item"
                                  :value="item"
                                  v-for="item in equipmentTypeList"
                                  :key="item"
                                ></el-option>
                              </el-select>
                            </div>
                            <div class="xf-dbform-item__sright">
                              <p class="xf-dbform-item__label">位置标记</p>
                              <el-select placeholder="请选择状态" v-model="slistQuery.positionSign">
                                <el-option label="全部" value="-1"></el-option>
                                <el-option label="已标记" value="1"></el-option>
                                <el-option label="未标记" value="0"></el-option>
                              </el-select>
                            </div>
                          </div>
                          <div class="xf-dbform-item">
                            <div class="xf-dbform-item__sleft">
                              <p class="xf-dbform-item__label">型号</p>
                              <el-input v-model="slistQuery.model" placeholder="请输入型号"></el-input>
                            </div>
                            <div class="xf-dbform-item__sright">
                              <p class="xf-dbform-item__label">楼层</p>
                              <el-input v-model="slistQuery.floorId" placeholder="请输入楼层"></el-input>
                            </div>
                          </div>
                          <div class="xf-dbform-item">
                            <div class="xf-dbform-item__sleft">
                              <p class="xf-dbform-item__label">位置描述</p>
                              <el-input
                                v-model="slistQuery.positionDescription"
                                placeholder="请输入位置描述"
                              ></el-input>
                            </div>
                          </div>
                        </div>
                        <div style="text-align: left; margin: 0; margin-top:20px;">
                          <el-button type="primary" @click="pointerQuery" size="mini">查询</el-button>
                          <el-button type="text" @click="visible2 = false" size="mini">取消</el-button>
                        </div>
                        <el-button slot="reference" type="text" size="mini">
                          <span style="color:#2bdef5">高级查询</span>
                        </el-button>
                      </el-popover>
                      <el-button
                        style="margin-left: 10px"
                        class="filter-item"
                        @click="handleCreate"
                        type="primary"
                        v-show="showdownload"
                        size="mini"
                      >添加传感器</el-button>
                      <!-- <el-button
                        type="text"
                        @click="importFn"
                        v-show="showdownload"
                        size="mini"
                      >导入表格</el-button>
                      <el-button
                        type="text"
                        @click="download"
                        v-show="showdownload"
                        size="mini"
                      >下载表格模版</el-button> -->
                    </div>
                  </div>
                </div>
              </el-row>
              <border-warp width-auto>
                <div class="fireDeviceManger_main_left_table">
                  <el-table
                    key="tableKey"
                    :data="list"
                    ref="multipleTable"
                    v-loading.body="listLoading"
                    fit
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                  >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="序号" width="50">
                      <template slot-scope="scope">
                        <span>{{scope.row.id}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="状态">
                      <template slot-scope="scope">
                        <span :style="{color:scope.row.color}">{{scope.row.status}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="实时数据">
                      <template slot-scope="scope">
                        <span v-if="scope.row.status!=='未启用'">
                          <el-button
                            type="text"
                            @click="viewActual(scope.row.id,scope.row.sensorNo,scope.row.equipmentType)"
                          >点击查看</el-button>
                        </span>
                        <span v-else>暂无数据</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="编号">
                      <template slot-scope="scope">
                        <span>{{scope.row.sensorNo}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="系列">
                      <template slot-scope="scope">
                        <span>{{scope.row.equipmentType}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="型号">
                      <template slot-scope="scope">
                        <span>{{scope.row.model}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="厂商">
                      <template slot-scope="scope">
                        <span>{{scope.row.manufacturer}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="所属建筑">
                      <template slot-scope="scope">
                        <span>{{scope.row.bName}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="楼层">
                      <template slot-scope="scope">
                        <span>{{scope.row.floor}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="位置">
                      <template slot-scope="scope">
                        <span>{{scope.row.positionDescription}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="位置标记">
                      <template slot-scope="scope">
                        <span>{{scope.row.positionSign}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="130" fixed="right">
                      <template slot-scope="scope">
                        <span @click="handleUpdate(scope.row)" class="comm-table-btn">
                          <icon-svg icon-class="bianji" style="fill:#2bdef5" />
                        </span>
                        <span @click="createDel(scope.row)" class="comm-table-btn">
                          <icon-svg icon-class="shanchu" style="fill:#2bdef5" />
                        </span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="sensor-pagination-container">
                    <div>
                      <el-checkbox
                        v-model="isselall"
                        :indeterminate="isIndeterminate"
                        @change="handleCheckAllChange"
                        v-show="list&&list.length!=0"
                      >全选</el-checkbox>
                      <el-button
                        type="text"
                        style="margin-left: 10px;"
                        @click="delAllSensor"
                        v-show="list&&list.length!=0"
                        :disabled="checklist&&checklist.length==0"
                      >全部删除</el-button>
                    </div>
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page.sync="listQuery.page"
                      :page-sizes="[10,15,30, 50]"
                      :page-size="listQuery.limit"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                    ></el-pagination>
                  </div>
                </div>
              </border-warp>
          </div>
          <div class="borderContent">
            <div class="borderContent_type">
              <title-warp :title="'建筑列表'">
                <div class="border_message">
                  <el-aside width="250px" class="flex-right-pannel_withline">
                    <div class="comm-tree-wrap" style="height:450px">
                      <div class="wrap-with-halfboder"></div>
                      <el-scrollbar style="height:100%">
                        <!-- <p class="right-tree-title">
                          <i class="el-icon-caret-right"></i>建筑列表
                        </p>-->
                        <el-button
                          type="text"
                          @click="viewAllTree"
                          style="padding-left:5px;color: rgba(255, 255, 255, 0.7);"
                        >查看全部</el-button>
                        <el-tree
                          class="filter-tree"
                          :data="treeData"
                          node-key="code"
                          highlight-current
                          :expand-on-click-node="false"
                          :props="defaultProps"
                          ref="cityTree"
                          @current-change="changeClick"
                          default-expand-all
                        >
                          <span class="build-custom-tree-node" slot-scope="{ node, data }">
                            <span :title="node.label" v-if="node.label.length>7">
                              <i class="itemstatus" :class="'status'+data.status"></i>
                              {{ node.label.substring(0,7)+"..." }}
                            </span>
                            <span :title="node.label" v-else>
                              <i class="itemstatus" :class="'status'+data.status"></i>
                              {{ node.label }}
                            </span>
                          </span>
                        </el-tree>
                      </el-scrollbar>
                    </div>
                  </el-aside>
                </div>
              </title-warp>
            </div>
          </div>
        </div>
        <!-- 底部导航 -->
        <bottom-nav
          :active="3"
          :routeData="$route.params.id"
          :routeMatched="$route.matched[0].path"
        ></bottom-nav>

      <slider-panel :Show.sync="isaddsensor" custom-class="out-side-frame">
        <p class="current-building">所属建筑：{{buildName}}</p>
        <el-form
          :model="sensorForm"
          ref="addsensorform"
          :rules="sensorrules"
          label-width="100px"
          label-position="top"
        >
          <el-form-item label="设备编号" prop="sensorNo">
            <el-input v-model.trim="sensorForm.sensorNo" placeholder="请输入设备编号"></el-input>
          </el-form-item>
          <el-form-item label="厂商 / 系列 / 型号" prop="entity">
            <el-cascader
              :options="entityOptions"
              filterable
              :clearable="true"
              v-model="sensorForm.entity"
              style="width:100%"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="楼层" prop="floor">
            <el-select
              v-model="sensorForm.floor"
              placeholder="请选择楼层"
              style="width:71%;margin-right:15px"
              @change="chFloorImg"
            >
              <el-option :label="item" :value="item" v-for="(item,index) in floors" :key="index"></el-option>
            </el-select>
            <el-button class="xf-input-withbtn__rbt" @click="markplace" v-if="planSetup==1">
              <icon-svg icon-class="checklocal" style="fill:#2bdef5" />
              {{sensorForm.positionSign==''?"标记位置":"已标记"}}
            </el-button>
          </el-form-item>
          <el-form-item label="位置描述" prop="positionDescription">
            <el-input v-model.trim="sensorForm.positionDescription"></el-input>
          </el-form-item>
          <el-button
            v-if="dialogStatus=='create'"
            type="primary"
            @click="saveSensor('addsensorform')"
            size="mini"
          >确 定</el-button>
          <el-button v-else type="primary" @click="updateSensor('addsensorform')" size="mini">确 定</el-button>
          <el-button
            @click="sensorForm.entity.length!==0||sensorForm.sensorNo!==''||sensorForm.channelId!==''||sensorForm.floor!==''||sensorForm.positionDescription!==''?isquit=true:cancelAddSensor('addsensorform')"
            type="text"
          >取 消</el-button>
        </el-form>
      </slider-panel>
      <el-dialog
        title="导入文件"
        :visible.sync="dialogImportVisible"
        :close-on-click-modal="false"
        :show-close="false"
        width="400px"
        top="40vh"
        custom-class="upload-cum"
      >
        <p class="uploadtitle">导入文件类型：xlsx 或 xls，大小不超过10M</p>
        <el-upload
          class="upload-wrap"
          :class="{filedisabled:uploadDisabled}"
          ref="upload"
          drag
          :headers="token"
          :action="uploadUrl"
          :data="uploadparams"
          :onSuccess="uploadSuccess"
          :on-progress="uploadOnProgress"
          :on-error="uploaderr"
          :beforeUpload="beforeUpload"
          :limit="1"
        >
          <el-button slot="trigger" class="uploadarea">+ 请选择或拖拽上传文件</el-button>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelUpload" type="primary" v-show="!uploadLoading">知道了</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="标记位置"
        :visible.sync="isfloorimg"
        :show-close="false"
        custom-class="xf-jc-dialog"
        width="360px"
        height="160px"
      >
        <div class="xf-jc-deletect">
          <p>{{isfloorimgtext}}</p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" size="mini" @click="goUpload">去上传</el-button>
          <el-button type="text" @click="isfloorimg=false">取消</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="退出提示"
        :visible.sync="isquit"
        :show-close="false"
        custom-class="xf-jc-dialog"
        width="360px"
        height="160px"
      >
        <div class="xf-jc-deletect">
          <p>内容已被修改，退出将不会保留修改内容</p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="danger"
            size="mini"
            @click="isquit=false;cancelAddSensor('addsensorform');"
          >确定</el-button>
          <el-button type="test" @click="isquit=false">取消</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="删除传感器"
        :visible.sync="isdelsensor"
        :show-close="false"
        custom-class="xf-jc-dialog"
        width="360px"
        height="160px"
      >
        <div class="xf-jc-deletect">
          <p>{{delsensortext}}</p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="danger" size="mini" @click="handleDelete">删除</el-button>
          <el-button type="text" @click="isdelsensor=false">取消</el-button>
        </div>
      </el-dialog>
      <ActualData
        :Show.sync="isactiondata"
        :attr2="channelId"
        :sensorid="sensorid"
        :sensornum="sensornum"
        :sensortype="sensortype"
      ></ActualData>
      <markPlace
        :Show.sync="ismarkplace"
        :getimgpath.sync="imgpath"
        :sensorinfo="sensorinfo"
        :positionSign.sync="sensorForm.positionSign"
        @sendMarkInfo="sendMarkInfo"
      ></markPlace>
    </div>
  </div>
</template>
<script>
import {
  fetchTree,
  advanceSelected,
  page,
  getObj,
  delObj,
  putObj
} from "@/api/device/deviceBuilding/index";
import {
  createSelected,
  addObj,
  getAllInfoObj,
  updateObj,
  getFloorImg
} from "@/api/device/deviceCollectingDevice/index";
import { getToken } from "@/utils/auth";
import markPlace from "@/views/device/deviceManger/components/markPlace";
import ActualData from "@/components/ActualData";
import sliderPanel from "@/components/SliderPanel";
import BottomNav from "@/components/BottomNav";
export default {
  name: "sensorTab",
  components: { markPlace, ActualData, sliderPanel, BottomNav },
  data() {
    return {
      uploadUrl: "/api/device/deviceSensor/sensorImport",
      curChannelId: "",
      planSetup: "0",
      visible2: false,
      showdownload: false,
      isfloorimgtext: "",
      isfloorimg: false,
      isquit: false,
      isactiondata: false,
      isdelsensor: false,
      isselall: false,
      isIndeterminate: false,
      checklist: [],
      sensorid: "",
      channelId: "",
      sensornum: "",
      sensortype: "",
      delsensortext: "",
      sensorinfo: {
        num: "", //编号
        name: ""
      },
      token: { Authorization: getToken() },
      sensorForm: {
        sensorNo: "",
        entity: [],
        floor: "",
        positionSign: "", //标记位置
        positionDescription: ""
      },
      styleObject: {
        left: "10px",
        top: "10px"
      },
      treeData: [],
      defaultProps: {
        children: "childList",
        label: "name",
        classval: "status"
      },
      uploadLoading: false, //上传状态按钮
      list: [],
      total: null,
      listLoading: false,
      slistQuery: {
        status: "-1",
        manufacturer: "全部",
        equipmentType: "全部",
        positionSign: "-1",
        model: "",
        floorId: "",
        positionDescription: ""
      },
      listQuery: {
        page: 1,
        limit: 15,
        sensorNo: undefined,
        ids: "-1"
      },
      floors: [],
      dialogFormVisible: false,
      dialogDeleteVisible: false,
      dialogImportVisible: false,
      uploadDisabled: false, //上传文件的显隐
      uploadparams: undefined,
      currentSelectObj: {},
      dialogStatus: "",
      textMap: {
        update: "编辑传感器",
        create: "添加传感器"
      },
      tableKey: 0,
      manufeList: [],
      equipmentTypeList: [],
      channelList: [],
      isaddsensor: false,
      ismarkplace: false,
      imgpath: "",
      markleft: "",
      marktop: "",
      entityOptions: [],
      buildName: "",
      curfloor: "",
      curbuildid: "",
      delsensorid: [],
      sensorrules: {
        sensorNo: [
          {
            required: true,
            message: "请输入设备编号",
            trigger: "blur"
          },
          {
            min: 1,
            max: 100,
            message: "最多允许输入100个字符",
            trigger: "blur"
          }
        ],
        entity: [
          {
            required: true,
            message: "请选择 厂商 / 系列 / 型号",
            trigger: ["change"]
          }
        ],
        floor: [
          {
            required: true,
            message: "请选择楼层",
            trigger: ["change"]
          }
        ],
        positionDescription: [
          {
            required: true,
            message: "请输入位置描述",
            trigger: "blur"
          },
          {
            min: 1,
            max: 50,
            message: "最多允许输入50个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {},
  methods: {
    fetchData() {
      this.handlerest();
      this.resetlistquery();
      this.restQuery();
      //  路由变化重载数据
      this.curChannelId = this.$route.params.id;
      this.initLoad();
    },
    resetlistquery() {
      this.listQuery.page = 1;
      this.listQuery.limit = 15;
      this.listQuery.sensorNo = undefined;
      this.listQuery.ids = "-1";
    },
    isparam() {
      let params = this.$route.params;
      return params.hasOwnProperty("id");
    },
    viewAllTree() {
      this.$refs.cityTree.setCurrentKey(null);
      this.showdownload = false;
      this.listLoading = true;
      this.listQuery.ids = "-1";
      this.listQuery.code = undefined;
      this.getList();
    },
    getSelected() {
      // 获取高级查询条件
      advanceSelected({ channelId: this.curChannelId }).then(response => {
        this.manufeList = response.data.manufacturer;
        this.equipmentTypeList = response.data.equipmentType;
        this.channelList = response.data.channel;
      });
    },
    pointerQuery() {
      // 高级查询
      this.visible2 = false;
      this.listLoading = true;
      // 取消绑定并合并查询条件
      this.slistQuery.floorId += "";
      let contactKeys = Object.assign(
        { channelId: this.curChannelId },
        JSON.parse(JSON.stringify(this.listQuery)),
        JSON.parse(JSON.stringify(this.slistQuery))
      );
      page(contactKeys).then(response => {
        this.list = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    importFn() {
      this.uploadparams = {
        id: this.listQuery.ids,
        channelId: this.curChannelId
      };
      this.dialogImportVisible = true;
    },
    cancelUpload() {
      this.$refs.upload.clearFiles();
      this.dialogImportVisible = false;
      this.uploadLoading = false;
    },
    uploadOnProgress(e) {
      let progress = Math.floor(e.percent);
      // 如果上传成功
      if (progress == "100") {
        this.uploadLoading = true;
      }
    },
    uploadSuccess(response, file, fileList) {
      // 上传成功的回调
      if (response.status == "200") {
        this.cancelUpload();
        this.$message({
          message: "导入成功！",
          type: "success"
        });
        // 刷新列表
        this.initLoad();
        //  清空全选
        this.isselall = false;
        this.isIndeterminate = false;
      } else if (response.status === "307") {
        // 文件格式错误
        this.cancelUpload();
        this.$message.error(response.message);
      } else {
        this.cancelUpload();
        this.$message.error(response.message);
        this.uploadLoading = false;
      }
    },
    uploaderr(err) {
      this.cancelUpload();
      this.$message.error(JSON.parse(err.message).message);
      this.uploadLoading = false;
    },
    beforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "xls";
      const extension2 = testmsg === "xlsx";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!extension && !extension2) {
        this.$message({
          message: "上传文件只能是 xls、xlsx格式!",
          type: "warning"
        });
      }
      if (!isLt2M) {
        this.$message({
          message: "上传文件大小不能超过 10MB!",
          type: "warning"
        });
      }
      return (extension || extension2) && isLt2M;
    },
    tableQuery() {
      //重置高级查询
      this.restQuery();
      this.getList();
    },
    handleCreate() {
      this.dialogStatus = "create";
      this.isaddsensor = true;
      this.sensorForm.positionSign = "";
      this.sensorinfo.num = "";
      this.sensorinfo.name = "";
      getAllInfoObj("", {
        buildingId: this.listQuery.ids,
        channelId: this.curChannelId
      }).then(res => {
        this.floors = res.data.floor;
        this.entityOptions = res.data.options;
      });
      this.$refs["addsensorform"].resetFields();
    },
    cancelAddSensor(formName) {
      const set = this.$refs;
      set[formName].resetFields();
      this.sensorForm.positionSign = "";
      this.handlerest();
      this.isaddsensor = false;
    },
    download() {
      window.open("http://file.tmc.turing.ac.cn/SensorImports.xls");
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    initLoad() {
      fetchTree().then(data => {
        if (data.data.length !== 0) {
          this.treeData = data.data;
        } else {
        }
      });
      this.getList();
    },
    getList() {
      this.listLoading = true;
      // 取消绑定并合并查询条件
      this.slistQuery.floorId += "";
      let contactKeys = Object.assign(
        { channelId: this.curChannelId },
        JSON.parse(JSON.stringify(this.listQuery)),
        JSON.parse(JSON.stringify(this.slistQuery))
      );

      page(contactKeys)
        .then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    changeClick(data) {
      //重置查询条件
      this.restQuery();
      if (data.childList) {
        // 如果有下层，隐藏下载按钮
        this.showdownload = false;
        this.listLoading = true;
        this.listQuery.ids = undefined;
        this.listQuery.code = data.code;
        page(Object.assign({ channelId: this.curChannelId }, this.listQuery))
          .then(data => {
            this.list = data.data.rows;
            this.total = data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.listLoading = false;
          });
      } else {
        this.showdownload = true;
        this.listLoading = true;
        this.listQuery.ids = data.code;
        this.buildName = data.name;
        this.listQuery.code = undefined;
        page(Object.assign({ channelId: this.curChannelId }, this.listQuery))
          .then(data => {
            this.list = data.data.rows;
            this.total = data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.listLoading = false;
          });
      }
    },
    markplace() {
      if (this.sensorForm.floor === "") {
        this.$notify({
          title: "提示",
          message: "请选择楼层",
          type: "warning",
          duration: 2000
        });
      } else {
        if (this.imgpath === "") {
          this.isfloorimgtext = `"${this.buildName +
            "," +
            this.curfloor +
            "层"}"未上传平面图！`;
          this.isfloorimg = true;
        } else {
          this.sensorinfo.num = this.sensorForm.sensorNo;
          this.sensorinfo.name = this.sensorForm.entity;
          this.ismarkplace = true;
        }
      }
    },
    goUpload() {
      this.$router.push("/adminSys/buildManager");
    },
    sendMarkInfo(pos) {
      this.sensorForm.positionSign = pos;
      this.ismarkplace = false;
    },
    markcancel() {
      this.ismarkplace = false;
    },
    handlerest() {
      this.sensorForm.sensorNo = "";
      this.sensorForm.entity = [];
      this.sensorForm.floor = "";
      this.sensorForm.positionSign = "";
      this.sensorForm.positionDescription = "";
    },
    restQuery() {
      //  清空全选
      this.isselall = false;
      this.isIndeterminate = false;
      //重置条件
      this.slistQuery.status = "-1";
      this.slistQuery.manufacturer = "全部";
      this.slistQuery.equipmentType = "全部";
      this.slistQuery.positionSign = "-1";
      this.slistQuery.model = "";
      this.slistQuery.floorId = "";
      this.slistQuery.positionDescription = "";
    },
    saveSensor(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          addObj(
            Object.assign(
              {},
              this.sensorForm,
              { buildingId: this.listQuery.ids },
              { entity: JSON.stringify(this.sensorForm.entity) }
            )
          ).then(() => {
            set[formName].resetFields();
            this.handlerest();
            this.getList();
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
            this.isaddsensor = false;
            //  清空全选
            this.isselall = false;
            this.isIndeterminate = false;
          });
        } else {
          return false;
        }
      });
    },
    handleUpdate(row) {
      this.dialogStatus = "update";
      this.isaddsensor = true;
      this.cursensorid = row.id;
      this.buildName = row.bName;
      let buildingId = this.listQuery.ids || this.listQuery.code;

      getAllInfoObj(row.id, {
        buildingId: buildingId,
        channelId: this.curChannelId
      })
        .then(res => {
          this.floors = res.data.floor;
          this.entityOptions = res.data.options;
          this.sensorForm.sensorNo = res.data.deviceSensor.sensorNo;
          this.sensorForm.entity = res.data.selectedOptions;
          this.curfloor = this.sensorForm.floor = res.data.deviceSensor.floor;
          this.curbuildid = res.data.deviceSensor.buildingId;
          this.sensorForm.positionSign = res.data.deviceSensor.positionSign; //标记位置
          this.sensorForm.positionDescription =
            res.data.deviceSensor.positionDescription;
        })
        .then(() => {
          getFloorImg({
            buildingId: this.curbuildid,
            floor: this.curfloor
          }).then(res => {
            if (res.data.length !== 0) {
              this.imgpath = res.data[0].filePath;
            } else {
              this.imgpath = "";
            }
          });
        });
    },
    updateSensor(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          updateObj(
            Object.assign(
              {},
              this.sensorForm,
              { buildingId: this.curbuildid, id: this.cursensorid + "" },
              { entity: JSON.stringify(this.sensorForm.entity) }
            )
          ).then(() => {
            this.getList();
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
            set[formName].resetFields();
            this.handlerest();
            this.isaddsensor = false;
          });
        } else {
          return false;
        }
      });
    },
    chFloorImg(val) {
      this.curfloor = val;
      let buildId =
        this.curbuildid === "" ? this.listQuery.ids : this.curbuildid;
      getFloorImg({ buildingId: buildId, floor: val }).then(res => {
        if (res.data.length !== 0) {
          this.imgpath = res.data[0].filePath;
          this.sensorForm.positionSign = "";
        } else {
          this.sensorForm.positionSign = "";
          this.imgpath = "";
        }
      });
    },
    createDel(row) {
      this.delsensortext =
        "删除此传感器将导致该点位的监测数据被清空，确定删除吗？";
      this.delsensorid = [];
      this.delsensorid.push(row.id);
      this.isdelsensor = true;
    },
    handleDelete() {
      delObj(this.delsensorid.toString()).then(res => {
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
          duration: 2000
        });
        this.isdelsensor = false;
        this.listQuery.page = 1;
        //  清空全选
        this.isselall = false;
        this.isIndeterminate = false;
        this.getList();
      });
    },
    viewActual(val, num, type) {
      this.sensorid = val;
      this.sensornum = num;
      this.sensortype = type;
      this.isactiondata = true;
    },
    handleSelectionChange(val) {
      this.checklist = [...val];
      let length =
        this.total > this.list.length ? this.list.length : this.total;
      if (val.length == length) {
        this.isselall = true;
        this.isIndeterminate = false;
      } else {
        this.isselall = false;
        this.isIndeterminate = true;
      }
      if (val.length === 0) {
        this.isIndeterminate = false;
      }
    },
    delAllSensor() {
      this.delsensorid = [];
      this.delsensortext = `删除此传感器将导致该点位的监测数据被清空，确定删除吗？`;
      this.checklist.forEach((item, index) => {
        this.delsensorid.push(item.id);
      });
      this.isdelsensor = true;
    },
    handleCheckAllChange() {
      this.$refs.multipleTable.toggleAllSelection();
    }
  },
  mounted() {
    this.fetchData();
    this.$store.dispatch("getImgAuth").then(() => {
      this.planSetup = this.$store.getters.planSetup;
    });
  },
  watch: {
    $route: "fetchData"
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-tree-node__children {
  i {
    &.itemstatus {
      vertical-align: middle;
      margin-right: 5px;
      width: 6px;
      height: 6px;
      display: inline-block;
      border-radius: 100%;
    }
    &.status0 {
      background: #ffab22;
    }
    &.status1 {
      background: #ff0000;
    }
    &.status2 {
      background: #67a91b;
    }
  }
}
// 随机色背景剪切
.dot-circl {
  background: currentColor;
  clip-path: circle(11%);
}
.flex-right-pannel_withline {
  border-left: 1px solid transparent;
  min-height: 86vh;
  box-sizing: border-box;
  padding-left: 10px;
  padding-top: 10px;
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-tree-node__label {
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.xf-query-input,
.xf-query-select {
  width: 200px;
  margin: 0 10px;
}
.addsensordialog > div {
  width: 500px;
  margin: 0 auto;
}
.addsensordialog .el-dialog__title {
  font-size: 32px;
}
.addsensordialog {
  .el-dialog__header {
    margin-top: 20px;
  }
  .custom-dialog-btn {
    position: absolute;
    font-size: 30px;
    right: 40px;
    top: 20px;
    color: #fff;
    &:hover {
      cursor: pointer;
    }
  }
  .dialog-footer {
    text-align: left;
  }
  //   带下拉选择的输入
  .tmselect .el-input {
    width: 80px;
  }
  .input-with-select .el-input-group__append {
    background-color: #fff;
  }
}
// 精准查询
.xf-double-form {
  .xf-dbform-item {
    display: flex;
    justify-content: space-between;
    .xf-dbform-item__sleft {
      .el-input {
        width: 320px;
      }
    }
    .xf-dbform-item__sright {
      .el-input {
        width: 320px;
      }
    }
  }
}
.upload-cum {
  .el-dialog__body {
    padding-top: 0;
    min-height: 40px;
    padding-bottom: 10px;
  }
  .dialog-footer {
    text-align: left;
  }
  .el-button.is-disabled {
    background-color: #d9d9d9;
    color: #fff;
    border-color: #d9d9d9;
  }
  .upload-wrap {
    width: 100%;
    margin-top: 20px;
    .el-upload {
      width: 100%;
    }
  }
  .el-upload-list__item {
    padding: 8px 0;
    background: #f1f1f1;
    .el-icon-close {
      top: 14px;
    }
    .el-icon-upload-success {
      vertical-align: bottom;
    }
  }
  .el-upload-dragger {
    height: 40px;
  }
  .filedisabled .el-upload {
    display: none;
  }
  .el-button--default {
    border-color: #dcdfe6;
  }
  .uploadarea {
    width: 100%;
    line-height: 16px;
    background-color: #f1f1f1;
    border-radius: 2px;
    font-size: 14px;
    color: #666;
  }
  .el-upload-list__item .el-progress {
    top: 30px;
  }
}
.sensor-pagination-container {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px;
}
.build-custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.current-building {
  color: #2bdef5;
}
</style>
<style lang="scss" scoped>
.el-scrollbar__wrap {
  overflow: auto !important;
}
.comm-tree-wrap {
  position: relative;
  padding: 25px 0 20px 30px !important;
  // background: linear-gradient(-140deg, transparent 2em, #0A1722 0);
}
// .fireDeviceManger {
//   background: #1a2956;
//   height: calc(100vh - 4px);
//   width: 100%;
//   min-width: 1600px;
//   overflow: hidden;

//   .fireDeviceManger-title {
//     background: url("../../../assets/layout/CombinedShape2.png");
//     background-size: 100% 100%;
//     background-repeat: no-repeat;
//     background-position: center;
//     width: 90px;
//     height: 32px;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//   }
// }
.fireDeviceManger_main {
  display: flex;
  overflow: hidden;
  .fireDeviceManger_main_left {
    flex: 1;
    overflow: hidden;
    margin-right: 20px;
    // padding: 0 0 0 40px;
    .fireDeviceManger_main_left_table {
      height: 459px;
      overflow: auto;
    }
  }
}
.borderContent {
  width: 443px;
  height: auto;
  // position: absolute;
  // right: 44px;
  // top: 130px;
  .borderContent_type {
    width: 443px;
    .border_message {
      width: 478px;
      height: 513px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: -30px;
      // padding: 20px;
      .border_message_num {
        width: 180px;
        height: 87px;
      }
    }
  }

  .borderContent_bottom {
    width: 443px;
    margin-top: 20px;
    .border_message {
      // width: 422px;
      width: 482px;
      margin-left: -30px;
      margin-right: -30px;
      margin-top: -30px;
      margin-bottom: -20px;
      // height: 187px;
      height: 237px;
    }
    .border_message2 {
      width: 422px;
      height: 150px;
      margin-top: 20px;
      .borderType_title {
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        color: #afdaf1;
        // font-weight: bold;
      }
    }
  }
}
</style>
